<template>
  <div>
    <transition name="animation">
      <el-card class="box-card" v-show="flag">
        <!-- 离职 -->
        <div slot="header" class="clearfix">
          <el-menu
            :default-active="show"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
          >
            <el-menu-item index="1">待离职</el-menu-item>
            <el-menu-item index="2">已离职</el-menu-item>
          </el-menu>
        </div>

        <template>
          <el-button type="primary">导出</el-button>
          <div id="wrap" class="wrap">
            <div class="box">
              <p class="txt">
                收到<span style="color: red">钟汉</span
                >的离职申请已超过20天，请尽快处理；收到<span style="color: red"
                  >江浩</span
                >的离职申请已超过20天，请尽快处理；<span style="color: red"
                  >陈兰</span
                >已离职超过10天，请尽快结算薪酬；
              </p>
            </div>
          </div>
          <!-- 待离职 -->
          <div v-if="show === '1'">
            <el-table
              :data="loading"
              border=""
              style="width: 100%"
              stripe
              :header-cell-style="{
                background: '#f5f7f9',
                borderTop: '1px solid #ebeef5',
                textAlign: 'center',
              }"
              :cell-style="{ textAlign: 'center' }"
            >
              <el-table-column
                width="120"
                type="index"
                label="序号"
                fixed
              ></el-table-column>
              <el-table-column
                width="120"
                prop="name"
                label="姓名"
                fixed
              ></el-table-column>
              <!-- <el-table-column
              width="120"
              prop="name"
              label="姓名"
            ></el-table-column> -->
              <el-table-column width="120" prop="organ" label="部门">
                <template slot-scope="scope">
                  {{ scope.row.stationId.name }}
                </template>
              </el-table-column>
              <el-table-column width="120" prop="station" label="岗位">
                <template slot-scope="scope">
                  {{ scope.row.organId.name }}
                </template>
              </el-table-column>
              <el-table-column width="120" prop="phone" label="手机号">
              </el-table-column>
              <el-table-column width="220" prop="_id" label="工号">
              </el-table-column>
              <el-table-column width="220" prop="sid" label="证件号">
              </el-table-column>
              <el-table-column width="120" prop="nature" label="工作性质">
              </el-table-column>
              <el-table-column width="120" prop="state" label="状态">
              </el-table-column>
              <el-table-column width="120" prop="entry" label="入职日期">
                <template slot-scope="scope">
                  {{ scope.row.entry | Day }}
                </template>
              </el-table-column>
              <el-table-column width="120" prop="leaveTime" label="离职日期">
                <template slot-scope="scope">
                  {{ scope.row.leaveTime | Day }}
                </template>
              </el-table-column>
              <el-table-column width="120" prop="timerAge" label="司龄">
                <template slot-scope="scope">
                  {{
                    scope.row.leaveTime.split("-")[0] -
                    scope.row.entry.split("-")[0]
                  }}{{ "年" }}
                </template>
              </el-table-column>
              <el-table-column width="120" prop="why" label="离职原因">
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="180">
                <template slot-scope="scope">
                  <el-button
                    @click="goOut(scope.row._id)"
                    type="text"
                    size="small"
                    style="color: red"
                    >确认离职</el-button
                  >
                  <el-button type="text" size="small" @click="no(scope.row._id)"
                    >放弃离职</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>

          <!-- 已离职 -->
          <div v-else>
            <el-table
              :data="tableData"
              border
              style="width: 100%"
              stripe
              :header-cell-style="{
                background: '#f5f7f9',
                borderTop: '1px solid #ebeef5',
                textAlign: 'center',
              }"
              :cell-style="{ textAlign: 'center' }"
            >
              <div id="wrap" class="wrap"></div>
              <el-table-column
                width="120"
                type="index"
                label="序号"
                fixed
              ></el-table-column>
              <el-table-column
                width="120"
                prop="name"
                label="姓名"
                fixed
              ></el-table-column>

              <el-table-column width="120" prop="organ" label="部门">
                <template slot-scope="scope">
                  {{ scope.row.stationId.name }}
                </template>
              </el-table-column>
              <el-table-column width="120" prop="station" label="岗位">
                <template slot-scope="scope">
                  {{ scope.row.organId.name }}
                </template>
              </el-table-column>
              <el-table-column width="120" prop="phone" label="手机号">
              </el-table-column>
              <el-table-column width="220" prop="_id" label="工号">
              </el-table-column>
              <el-table-column width="220" prop="sid" label="证件号">
              </el-table-column>
              <el-table-column width="120" prop="nature" label="工作性质">
              </el-table-column>
              <el-table-column width="120" prop="state" label="状态">
              </el-table-column>
              <el-table-column width="120" prop="entry" label="入职日期">
                <template slot-scope="scope">
                  {{ scope.row.entry | Day }}
                </template>
              </el-table-column>
              <el-table-column width="120" prop="leaveTime" label="离职日期">
                <template slot-scope="scope">
                  {{ scope.row.leaveTime | Day }}
                </template>
              </el-table-column>
              <el-table-column width="120" prop="timerAge" label="司龄">
                <template slot-scope="scope">
                  {{
                    scope.row.leaveTime.split("-")[0] -
                    scope.row.entry.split("-")[0]
                  }}{{ "年" }}
                </template>
              </el-table-column>
              <el-table-column width="120" prop="why" label="离职原因">
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="180">
                <template slot-scope="scope">
                  <el-button
                    @click="handleClick(scope.row._id)"
                    type="text"
                    size="small"
                    >重新入职</el-button
                  >
                  <el-button type="text" size="small" @click="no(scope.row._id)"
                    >撤销离职</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
      </el-card>
    </transition>
  </div>
</template>

<script>
export default {
  name: "VueSalarysysTimer",

  data() {
    return {
      show: "1",
      // 待离职
      loading: [],
      // 已离职
      tableData: [],
      flag: false,
      wrap: "",
      box: "",
      p: "",
    };
  },

  mounted() {
    this.getData();
    setTimeout(() => {
      this.flag = true;
    }, 100);
    this.wrap = document.getElementById("wrap");
    this.box = wrap.getElementsByTagName("div")[0];
    this.p = document.getElementsByTagName("p")[0];
    this.fun();
  },

  methods: {
    // 文字滚动
    fun() {
      // offsetWidth返回一个元素的局部宽度
      if (this.wrap.offsetWidth > this.p.offsetWidth) {
        return false;
      }
      this.box.innerHTML += this.box.innerHTML;
      setTimeout(this.fun1, 50);
    },
    fun1() {
      if (this.wrap.offsetWidth > this.wrap.scrollLeft) {
        this.wrap.scrollLeft++;
        setTimeout(this.fun1, 15);
      } else {
        setTimeout(this.fun2, 50);
      }
    },
    fun2() {
      this.wrap.scrollLeft = 0;
      this.fun1();
    },

    // 改变show
    handleSelect(key, keyPath) {
      // console.log(key, keyPath);
      this.show = key[0];
    },
    handleClick(obj) {
      console.log(obj);
    },
    async getData() {
      let wait = await this.$axios.get("/organ/getWait");
      // console.log(wait,'121212');
      this.loading = wait.data.data;
      let over = await this.$axios.get("/organ/getOver");
      this.tableData = over.data.data;
      console.log(this.tableData, "1212222222");
    },
    async no(id) {
      // console.log(id);
      let {
        data: { code, msg },
      } = await this.$axios.get("/organ/getNo?id=" + id);
      // console.log(code);
      if (code == 200) {
        this.$notify({
          title: "成功",
          message: msg,
          type: "success",
        });
        this.getData();
      }
    },
    goOut(id) {
      this.$router.push({ path: "/home/outgoing", query: { id } });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-table {
  margin-top: 30px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
// 动画
.animation-enter,
animation-leave-to {
  transform: translateX(50px);
  opacity: 0;
}

.animation-enter-active {
  transition: all 0.5s ease-in-out;
}

.animation-enter-to,
animation-leave {
  transform: translateX(0);
  opacity: 1;
}
// 文字滚动
.wrap {
  /* border: 1px solid #000; */
  font-size: 14px;
  color: #333;
  padding: 5px;
  // 强制不换行
  white-space: nowrap;
  overflow: hidden;
  width: 500px;
}

.box {
  width: 1200px;
  overflow: hidden;
}

.box p {
  display: inline-block;
}
</style>




